<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-cloak和v-once使用</title>

</head>

<body>
  <div id="app">
    <!-- 使用局部自定义指令 -->
    <input type="text" v-foc>
  </div>
  <div id="app1">
    <!-- <input type="text" v-foc> -->
    <!-- <input type="text" v-focus> -->
  </div>
  <!-- 
  语法：
  1.Vue.directive(arg1,arg2)
  2.参数解释
     arg1是一个字符串  自定义指令的名称
     arg2是一个对象    里面有各种方法代表不同的时机要执行的方法
    Vue.directive('focus', {
      // 当被绑定的元素插入到 DOM 中时 这个方法会被执行
      inserted: function (el) {
        // 实现的具体功能
      }
    })
 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
  <script>
    console.log(Vue)
    // 全局自定义指令
    Vue.directive('focus', {
      // 很多钩子函数
      /**
       * el=>获取使用指令的元素DOM对象
       */
      inserted(el) {
        console.log(el)
        el.style.background = '#ddd'
        // 自动获取焦点
        el.focus()
      }
    })

    const vm = new Vue({
      el: '#app',
      data: {

      },
      // 局部自定义指令
      directives: {
        // 可以定义多个自定义指令
        foc: {
          // 很多钩子函数
          /**
           * el=>获取使用指令的元素DOM对象
           */
          inserted(el) {
            console.log(el)
            el.style.background = '#ddd'
            // 自动获取焦点
            el.focus()
          }
        }
      },
      methods: {


      }
    })

    const vm1 = new Vue({
      el: '#app1',
      data: {

      },
      methods: {


      }
    })
  </script>
</body>

</html>